<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 class="title">用户注册</h2>
      <el-form 
        :model="registerForm"
        label-width="100px"
        class="register-form">
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="registerForm.username"
            prefix-icon="el-icon-user"
            placeholder="4-16位字母数字组合"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="registerForm.password"
            prefix-icon="el-icon-lock"
            placeholder="6-20位字符"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="registerForm.checkPass"
            prefix-icon="el-icon-lock"
            placeholder="再次输入密码"
            show-password
          ></el-input>
        </el-form-item>

		<el-form-item label="昵称" prop="nickname">
		  <el-input 
		    v-model="registerForm.nickname"
		    prefix-icon="el-icon-user"
		    placeholder="4-16位字母数字组合"
		  ></el-input>
		</el-form-item>
		
		<el-form-item label="性别" prop="sex">
		  <el-input 
		    v-model="registerForm.sex"
		    prefix-icon="el-icon-user"
		  ></el-input>
		</el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="registerForm.email"
            prefix-icon="el-icon-message"
            placeholder="请输入有效邮箱"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="registerForm.phone"
            prefix-icon="el-icon-mobile-phone"
            placeholder="11位手机号码"
          ></el-input>
        </el-form-item>
		
		<el-form-item label="身份证号" prop="id_number">
		  <el-input
		    v-model="registerForm.id_number"
		    prefix-icon="el-icon-mobile-phone"
		    placeholder="18位身份证号"
		  ></el-input>
		</el-form-item>
		
		<el-form-item label="地址" prop="id_number">
		  <el-input
		    v-model="registerForm.address"
		    prefix-icon="el-icon-mobile-phone"
		    placeholder="地址"
		  ></el-input>
		</el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm()"
            class="submit-btn"
          >立即注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        checkPass: '',
		nickname:'',
		sex:0,
        email: '',
        phone: '',
		id_number:'',
		address:''
      }
    };
  },
  methods: {
    submitForm() {
      axios({
      		url:'/api/yonghu/addYonghu',
      		method:'post',
      		data:{
      			'username':this.registerForm.username,
      			'password':this.registerForm.password,
      			'checkPass':this.registerForm.checkPass,
      			'nickname':this.registerForm.nickname,
      			'sex':this.registerForm.sex,
      			'email':this.registerForm.email,
      			'phone':this.registerForm.phone,
				'id_number':this.registerForm.id_number,
				'address':this.registerForm.address
      		}
      }).then(res=>{
      	console.log(res)
      	if(res.data.code === 0){
      		this.$router.replace({ name: 'login' })
      	}
      }).catch(e=>{
      		console.log(e)
      })
    }
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.register-card {
  width: 500px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.title {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
}
.register-form {
  margin-top: 20px;
}
.submit-btn {
  width: 100%;
}
</style>
